<template>
  <div class="search">
    <Row>
      <Col>
      <Card>
        <Row @keydown.enter.native="handleSearch">
          <Form ref="searchForm" :model="searchForm" inline :label-width="80" class="search-form">
            <Form-item label="设备名称" prop="equipmentName">
              <Input type="text" v-model="searchForm.equipmentName" placeholder="请输入设备名称" clearable style="width: 200px"/>
            </Form-item>
            <Form-item label="设备类型" prop="equipmentType">
              <Select v-model="searchForm.equipmentType" placeholder="请选择" clearable style="width: 200px">
                <Option value="1">摄像头</Option>
                <Option value="2">水质监测仪</Option>
              </Select>
            </Form-item>
            <Form-item label="所属河流" prop="riverId">
              <Select v-model="searchForm.riverId" placeholder="请选择" clearable style="width: 200px">
                <Option v-for="river in riverData" :value="river.id">{{river.riverName}}</Option>
              </Select>
            </Form-item>
            <Form-item style="margin-left:-35px;" class="br">
              <Button @click="handleSearch" type="primary" icon="ios-search">搜索</Button>
              <Button @click="handleReset">重置</Button>
            </Form-item>
          </Form>
        </Row>
        <Row class="operation">
          <Button @click="add" type="primary" icon="md-add">添加</Button>
          <Button @click="delAll" icon="md-trash">批量删除</Button>
          <Button @click="getDataList" icon="md-refresh">刷新</Button>
        </Row>
        <Row>
          <Alert show-icon>
            已选择 <span class="select-count">{{selectCount}}</span> 项
            <a class="select-clear" @click="clearSelectAll">清空</a>
          </Alert>
        </Row>
        <Row>
          <Table :loading="loading" border :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect"></Table>
        </Row>
        <Row type="flex" justify="end" class="page">
          <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[10,20,50]" size="small" show-total show-elevator show-sizer></Page>
        </Row>
      </Card>
      </Col>
    </Row>
    <Modal :title="modalTitle" v-model="modalVisible" :mask-closable='false' :width="500">
      <Form ref="form" :model="form" :label-width="100" :rules="formValidate" >        <FormItem label="设备名称" prop="equipmentName" >
        <Input v-model="form.equipmentName" style="width:100%"/>
      </FormItem>
        <FormItem label="设备类型" prop="equipmentType" >
          <Select v-model="form.equipmentType" style="width:100%">
            <Option value="1">摄像头</Option>
            <Option value="2">水质监测仪</Option>
          </Select>
        </FormItem>
        <FormItem label="经度" prop="lon" >
          <Input v-model="form.lon" style="width:100%"/>
        </FormItem>
        <FormItem label="纬度" prop="lat" >
          <Input v-model="form.lat" style="width:100%"/>
        </FormItem>
        <FormItem label="备注" prop="bak" >
          <Input v-model="form.bak" style="width:100%"/>
        </FormItem>
        <FormItem label="设备可访问地址" prop="address" >
          <Input v-model="form.address" style="width:100%"/>
        </FormItem>
        <FormItem label="所属河流" prop="riverId" >
          <Select v-model="form.riverId" style="width:100%">
            <Option v-for="river in riverData" :value="river.id">{{river.riverName}}</Option>
          </Select>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="modalVisible=false">取消</Button>
        <Button type="primary" :loading="submitLoading" @click="handleSubmit">提交</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  export default {
    name: "equipments",
    components: {
    },
    data() {
      return {
        loading: true, // 表单加载状态
        modalType: 0, // 添加或编辑标识
        modalVisible: false, // 添加或编辑显示
        modalTitle: "", // 添加或编辑标题
        searchForm: { // 搜索框初始化对象
          pageNumber: 1, // 当前页数
          pageSize: 10, // 页面大小
          equipmentName:"",
          equipmentType:"",
          riverId:"",
          sort: "", // 默认排序字段
          order: "desc", // 默认排序方式
        },
        form: { // 添加或编辑表单对象初始化数据
          equipmentName: "",
          equipmentType: "",
          lon: "",
          lat: "",
          bak: "",
          address: "",
          riverId: "",
        },
        // 表单验证规则
        formValidate: {
          equipmentName: [{ required: true, message: "请填写设备名称", trigger: "blur" }],
          equipmentType: [{ required: true, message: "请选择设备类型", trigger: "blur" }],
          lon: [{ required: true, message: "请填写经度", trigger: "blur" }],
          lat: [{ required: true, message: "请填写纬度", trigger: "blur" }],
          riverId: [{ required: true, message: "请选择所属河流", trigger: "blur" }],
        },
        submitLoading: false, // 添加或编辑提交状态
        selectList: [], // 多选数据
        selectCount: 0, // 多选计数
        riverData:[],
        columns: [
          // 表头
          {
            type: "selection",
            width: 60,
            align: "center"
          },
          {
            title:"序号",
            type: "index",
            width: 80,
            align: "center"
          },
          {
            title: "设备名称",
            key: "equipmentName",
            minWidth: 120,
            sortable: false,
          },
          {
            title: "设备类型",
            key: "equipmentType",
            minWidth: 100,
            sortable: false,
            render: (h, params) => {
              return h("span", params.row.equipmentType == "1"?"摄像头":"水质监测仪");
            }
          },
          {
            title: "经度",
            key: "lon",
            minWidth: 120,
            sortable: false,
          },
          {
            title: "纬度",
            key: "lat",
            minWidth: 120,
            sortable: false,
          },
          {
            title: "故障状态",
            key: "fault",
            align: "center",
            width: 90,
            render: (h, params) => {
              return h(
                      "i-switch",
                      {
                        props: {
                          value: params.row.fault,
                          size:"large",
                          "true-value": '0',
                          "false-value": '1',
                        },
                        on: {
                          "on-change": v => {
                            this.changeStatus(params.row, v);
                          }
                        }
                      },
                      [
                        h("span", { slot: "open" }, "启用"),
                        h("span", { slot: "close" }, "故障")
                      ]
              );
            }
          },
          {
            title: "所属河流",
            key: "riverName",
            minWidth: 120,
            sortable: false,
          },
          {
            title: "设备可访问地址",
            key: "address",
            minWidth: 120,
            sortable: false,
          },

          {
            title: "备注",
            key: "bak",
            minWidth: 120,
            sortable: false,
          },
          {
            title: "操作",
            key: "action",
            align: "center",
            width: 200,
            render: (h, params) => {
              return h("div", [
                h(
                        "Button",
                        {
                          props: {
                            type: "primary",
                            size: "small",
                            icon: "ios-create-outline"
                          },
                          style: {
                            marginRight: "5px"
                          },
                          on: {
                            click: () => {
                              this.edit(params.row);
                            }
                          }
                        },
                        "编辑"
                ),
                h(
                        "Button",
                        {
                          props: {
                            type: "error",
                            size: "small",
                            icon: "md-trash"
                          },
                          on: {
                            click: () => {
                              this.remove(params.row);
                            }
                          }
                        },
                        "删除"
                )
              ]);
            }
          }
        ],
        data: [], // 表单数据
        total: 0 // 表单数据总数
      };
    },
    methods: {
      init() {
        this.getDataList();
        this.getRiverList();
      },
      changePage(v) {
        this.searchForm.pageNumber = v;
        this.getDataList();
        this.clearSelectAll();
      },
      changeStatus(row, v) {

        row.fault = v;
        for (let attr in row) {
          if (row[attr] === null) {
            row[attr] = "";
          }
        }
        let str = JSON.stringify(row);
        let data = JSON.parse(str);

        this.postRequest("/equipments/insertOrUpdate", data).then(res => {
          if (res.success) {
            this.$Message.success("操作成功");
            this.getDataList();
            this.modalVisible = false;
          }
        });
      },
      changePageSize(v) {
        this.searchForm.pageSize = v;
        this.getDataList();
      },
      handleSearch() {
        this.searchForm.pageNumber = 1;
        this.searchForm.pageSize = 10;
        this.getDataList();
      },
      handleReset() {
        this.$refs.searchForm.resetFields();
        this.searchForm.pageNumber = 1;
        this.searchForm.pageSize = 10;
        // 重新加载数据
        this.getDataList();
      },
      changeSort(e) {
        this.searchForm.sort = e.key;
        this.searchForm.order = e.order;
        if (e.order === "normal") {
          this.searchForm.order = "";
        }
        this.getDataList();
      },
      clearSelectAll() {
        this.$refs.table.selectAll(false);
      },
      changeSelect(e) {
        this.selectList = e;
        this.selectCount = e.length;
      },
      getDataList() {
        this.loading = true;
        //带多条件搜索参数获取表单数据 请自行修改接口
        this.getRequest("/equipments/getByCondition", this.searchForm).then(res => {
          this.loading = false;
          if (res.success) {
            this.data = res.result.records;
            this.total = res.result.total;
          }
        });
      },
      getRiverList() {
        let that = this;
        this.loading = true;
        //带多条件搜索参数获取表单数据 请自行修改接口
        this.getRequest("/river/getAll", this.searchForm).then(res => {
          this.loading = false;
          if (res.success) {
            that.riverData = res.result;
          }
        });
      },
      handleSubmit() {
        this.$refs.form.validate(valid => {
          if (valid) {
            this.submitLoading = true;
            if (this.modalType === 0) {
              // 添加 避免编辑后传入id等数据 记得删除
              delete this.form.id;
              let data = this.form;
              data.fault = "0";
              this.postRequest("/equipments/insertOrUpdate", data).then(res => {
                this.submitLoading = false;
                if (res.success) {
                  this.$Message.success("操作成功");
                  this.getDataList();
                  this.modalVisible = false;
                }
              });

            } else {
              // 编辑
              this.postRequest("/equipments/insertOrUpdate", this.form).then(res => {
                this.submitLoading = false;
                if (res.success) {
                  this.$Message.success("操作成功");
                  this.getDataList();
                  this.modalVisible = false;
                }
              });

            }
          }
        });
      },
      add() {
        this.modalType = 0;
        this.modalTitle = "添加";
        this.$refs.form.resetFields();
        delete this.form.id;
        this.modalVisible = true;
      },
      edit(v) {
        this.modalType = 1;
        this.modalTitle = "编辑";
        this.$refs.form.resetFields();
        // 转换null为""
        for (let attr in v) {
          if (v[attr] === null) {
            v[attr] = "";
          }
        }
        let str = JSON.stringify(v);
        let data = JSON.parse(str);
        this.form = data;
        this.modalVisible = true;
      },
      remove(v) {
        this.$Modal.confirm({
          title: "确认删除",
          // 记得确认修改此处
          content: "您确认要删除【" + v.equipmentName + "】?",
          loading: true,
          onOk: () => {
            // 删除
            this.deleteRequest("/equipments/delByIds/" + v.id).then(res => {
              this.$Modal.remove();
              if (res.success) {
                this.$Message.success("操作成功");
                this.getDataList();
              }
            });

          }
        });
      },
      delAll() {
        if (this.selectCount <= 0) {
          this.$Message.warning("您还未选择要删除的数据");
          return;
        }
        this.$Modal.confirm({
          title: "确认删除",
          content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
          loading: true,
          onOk: () => {
            let ids = "";
            this.selectList.forEach(function(e) {
              ids += e.id + ",";
            });
            ids = ids.substring(0, ids.length - 1);
            // 批量删除
            this.deleteRequest("/equipments/delByIds/" + ids).then(res => {
              this.$Modal.remove();
              if (res.success) {
                this.$Message.success("操作成功");
                this.clearSelectAll();
                this.getDataList();
              }
            });
            // 模拟请求成功
            // this.$Message.success("操作成功");
            // this.$Modal.remove();
            // this.clearSelectAll();
            // this.getDataList();
          }
        });
      }
    },
    mounted() {
      this.init();
    }
  };
</script>
<style lang="less">
  .search {
  .operation {
    margin-bottom: 2vh;
  }
  .select-count {
    font-size: 13px;
    font-weight: 600;
    color: #40a9ff;
  }
  .select-clear {
    margin-left: 10px;
  }
  .page {
    margin-top: 2vh;
  }
  .drop-down {
    font-size: 13px;
    margin-left: 5px;
  }
  }
</style>